import KeepAliveLayout from "./KeepAlive";

export default function index() {
	return (
		<div>
			<KeepAliveLayout
				keepPaths={["/keep-alive/about", "/keep-alive/mine"]}
			></KeepAliveLayout>
			<h2>
				在 React 和 React Native (RN) 中，处理页面或组件的 “keep-alive”
				场景时，由于它们的运行环境和平台特性不同，解决方案也有所不同。下面将分别解释它们各自可能遇到的场景及相应的解决方案
			</h2>
			<h3>React</h3>
			<h4>React-Keep-Alive：</h4>
			<div>
				react-keep-alive
				是一个常用的库，专门用于缓存组件。它可以在组件离开视图后保持状态，并在用户返回该视图时恢复。
			</div>
			<h4> Redux 等状态管理工具、记录当前滚动位置 </h4>
            <h3>React Native (RN) 中的 Keep-Alive 场景</h3>
            <h4>在 React Native 中，类似的需求也存在，尤其是在移动应用中，切换页面时希望保持一些组件状态不被重置。移动端的内存管理更为严格，频繁的组件重新渲染或数据丢失可能影响用户体验。</h4>
            <ul>
                <li> 应用页面间切换时需要保持某些状态（如输入内容、滚动位置等）。</li>
                <li>在导航栈中返回时，之前的页面希望不被销毁。</li>
                <li>离开页面时希望暂时冻结某些数据，但不销毁。</li>
            </ul>
            <h4>React Navigation: detachInactiveScreens：可以通过设置 detachInactiveScreens: false 来防止屏幕被卸载，从而实现类似的缓存效果 </h4>
            <h4>状态管理 (Context/Redux/Zustand/Jotai)：</h4>
            <h4>AsyncStorage 持久化存储工具</h4>
		</div>
	);
}
